//模态框组件
import React, { useState,forwardRef, useImperativeHandle } from 'react';
import { Button, Modal,Input,Radio,message } from 'antd';
//导入添加、编辑用户信息接口
import {adduser,edituser} from '../api/user'
const MyModal = forwardRef((props,ref) => {
    //定义模态框标题
    const [Modaltitle, setModaltitle] = useState('');
    const [isModalOpen, setIsModalOpen] = useState(false);//模态框显示与隐藏
    //修改受控组件(表单双向绑定的数据)
    const [currentUser, setcurrentUser] = useState({ gender: '1' });
    //表单受控组件onChange触发的事件
    const onChange=(e,key)=>{
      console.log(e,'e');
      currentUser[key]=e.target.value 
      setcurrentUser({...currentUser})
    }
    const showModal = () => {
      setIsModalOpen(true);
    };
    //点击确定
    const handleOk = () => {
      // 1\隐藏模态框
      setIsModalOpen(false);
      // 2、根据标题判断是新增还是编辑，来调取不同的接口实现模态框复用
      if(Modaltitle=='添加'){
        // 调用添加用户接口
        adduser(currentUser).then(res=>{
          console.log('添加用户',res);
          if(res.data.errNo==0){
            //添加成功，提示添加成功
            message.success('添加成功', [1], ()=>{
              //重新获取最新的用户信息列表，重新渲染
                props.getuserlistFn({page:props.page})
              //清空输入历史
              setcurrentUser({username:'',password:'',gender:1,email:''})
              })
          }
        })
      }else if(Modaltitle=='编辑'){
        //调用编辑接口
        edituser(currentUser).then(res=>{
            console.log('编辑用户信息',res);
            if(res.data.errNo==0){
               //添加成功，提示添加成功
                message.success('修改成功', [1], ()=>{
              //重新获取最新的用户信息列表，重新渲染
                props.getuserlistFn({page:props.page})
              })
            }
        })
      }

    };
    // 点击取消
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    useImperativeHandle(ref,()=>{
        return{
            isModalOpen,
            showModal,//控制模态框显示隐藏的方法
            setModaltitle,//修改模态框标题的方法
            setcurrentUser // 修改当前模态框的currentUser 用户信息方法
        }
    })
    return (
        // <>
        <div>
          <Modal title={Modaltitle} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>
            <Input placeholder='用户名' value={currentUser.username} onChange={(e)=>onChange(e,'username')}/>
          </p>
          <p>
          <Input placeholder='密码' value={currentUser.password} onChange={(e) => onChange(e,'password' )} />
          </p>
          <p>
          <Input placeholder='手机号' value={currentUser.mobile} onChange={(e) => onChange(e,'mobile' )} />
          </p>
          <p>
          <Radio.Group onChange={(e)=>onChange(e,'gender')} value={currentUser.gender}>
            <Radio value={'1'}>男</Radio>
            <Radio value={'2'}>女</Radio>
            <Radio value={'3'}>保密</Radio>
        </Radio.Group>
          </p>
          <p>
            <Input placeholder='邮箱' value={currentUser.email} onChange={(e)=>onChange(e,'email')}></Input>
          </p>
        </Modal>
        </div>
 
      // </>
    );
})

export default MyModal;
